<template>
	<div class="certificate">
		<!-- 头部搜索 -->
		<search-header></search-header>
		<!-- 合计 -->
		<div class="total">
			<div class="tol">
				<span class="all">合计：<span class="peo">100人</span></span>
			</div>
			<div class="area">
				<span>地区
                    <img src="static/icon_pc/icon/icon_down.png" alt="">
                </span>
			</div>
		</div>
		<!-- 查询结果 -->
		<div class="serresult">
			<div class="result">查询结果：职场征信等级—<span>优秀</span></div>
		</div>
		<!-- 输入证书信息 -->
		<div class="zsinfo">
			<h5>请输入证书信息</h5>
			<!-- 头像 -->
			<div class="touxiang">
				<form>
					<!-- 姓名 -->
					<div class="padd-right">
						<label class="padd-left">头像</label>
						<span class="name"> 
                            <img src="static/icon_pc/icon/icon_add_big.png" alt="">
                        </span>
					</div>
					<!-- 姓名 -->
					<div class="padd-name">
						<label class="padd-left">姓名</label>
						<span class="name"> 
                            <input type="text" placeholder="请输入姓名">
                        </span>
					</div>
				</form>
				<span class="countinfo">默认使用账户信息</span>
			</div>
		</div>
		<!-- 生成征信证书 -->
		<div class="button">
			<button class="btn">生成征信证书</button>
		</div>

	</div>
</template>
<script>
	// 引入搜索头部组件
	import SearchHeader from '../../common/Searchheader';
	export default {
		data() {
			return {
				value: ''
			}
		},
		name: 'searchlist',
		components: {
			SearchHeader
		}
	}
</script>
<style>
	.certificate {
		background-color: #F8F8F8;
	}
	/* 总计 */
	
	.certificate .total {
		height: .88rem;
		line-height: .88rem;
		padding: 0 .3rem;
		border-bottom: .01rem solid #ccc;
		background-color: #fff;
	}
	
	.certificate .total .tol {
		float: left;
	}
	
	.certificate .all {
		font-size: .28rem;
		color: #999;
	}
	
	.certificate .all .peo {
		color: #333;
	}
	
	.certificate .total .area {
		float: right;
	}
	
	.certificate .area span {
		font-size: .28rem;
		color: #0085F0;
	}
	/* 查询结果 */
	
	.certificate .serresult {
		height: .88rem;
		margin-top: .2rem;
		line-height: .88rem;
		padding: 0 .3rem;
		background-color: #fff;
	}
	
	.certificate .result {
		font-size: .28rem;
		color: #0085F0;
		font-weight: 500;
		font-family: PingFang-SC-Medium;
	}
	
	.result span {
		font-size: .34rem;
		color: #f40a0a;
		font-weight: 500;
		font-family: PingFang-SC-Medium;
	}
	/* 输入证书信息 */
	
	.certificate .zsinfo {
		position: relative;
	}
	
	.certificate  .zsinfo h5 {
		color: #999;
		font-size: .28rem;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		padding: 0 .3rem;
		margin: 0;
		padding-top: .41rem;
		margin-bottom: .24rem;
	}
	/* 头像 */
	
	.certificate  .touxiang {
		height: 1.4rem;
		border-bottom: .001rem solid #ccc;
		background-color: #fff;
	}
	
	.certificate  .padd-right {
		padding-right: .25rem;
		line-height: 1.4rem;
		background-color: #fff;
	}
	
	.certificate  .padd-name {
		height: .88rem;
		background-color: #fff;
		line-height: .88rem;
	}
	
	.certificate  .padd-left {
		font-size: .3rem;
		color: #333;
		font-weight: 500;
		padding-left: .3rem;
	}
	
	.certificate  .name {
		font-size: .25rem;
		color: #666;
		float: right;
	}
	
	.certificate  .name img {
		width: 1rem;
		height: 1rem;
	}
	
	.certificate  .name>input {
		border: none;
		padding-top: .3rem;
		text-align: right;
	}
	/* 默认使用账户信息 */
	
	.certificate  .countinfo {
		font-size: .26rem;
		color: #0085F0;
		padding-right: .27rem;
		bottom: -65%;
		right: 0;
		position: absolute;
	}
	/* 生成征信证书 */
	
	.certificate  .button {
		text-align: center;
		margin-top: 25%;
	}
	
	.certificate  .btn {
		width: 7rem;
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		border-radius: .15rem;
	}
</style>